<!--used-->
<template>
  <div class="template-card-list-box">
    <div v-for="(item, index) in templateList" :key="index" class="card-box-item">
      <template-card-new :card-data="item" @to-design="toDesign(item)"></template-card-new>
    </div>
  </div>
</template>
<script lang="ts" setup>
import appStore from '@/store';
import {ITempList} from '@/template/type';
import TemplateCardNew from '@/components/TemplateCardNew/TemplateCardNew.vue';
import {storeToRefs} from 'pinia';
import {openGlobalLoading} from "@/utils/common";
import {getTemplateById, getTemplateJsonById, uploadResume} from "@/http/m_api/template";
import {ElMessage} from "element-plus";

defineProps<{
  templateList: Array<ITempList>;
}>();

const router = useRouter();
const {selectedModuleId, templateBase, HJNewJsonStore} = storeToRefs(appStore.useCreateTemplateStore);
const {resetResumeJson} = appStore.useResumeJsonNewStore;
const {resetSelectModel} = appStore.useSelectMaterialStore;
const {loginStatus} = storeToRefs(appStore.useUserInfoStore)

const toDesign = async (item: any) => {
  const token = localStorage.getItem('token');
  const userInfo = localStorage.getItem('userInfo');
  if(!token || !userInfo){
    ElMessage.error("请先登录！")
    return;
  }
  selectedModuleId.value = ''; // 重置选中模块
  openGlobalLoading(); // 等待动画层
  resetResumeJson(); // 重置json数据
  resetSelectModel(); // 重置选中模块
  // 首先读模板基本信息
  const template_json = await getTemplateJsonById(item.id);
  if(template_json.code === 0){
    templateBase.value = item;
    HJNewJsonStore.value = JSON.parse(template_json.message);
    const response = await uploadResume(item.id, item.title, item.coverUrl, HJNewJsonStore.value);
    if(response.code === 0) {
      await router.push({
        name: "designer",
        params: {
          id: response.data.id,
        }
      });
    }
  }
  else{
    ElMessage({type: "error", message: '加载失败，请稍后再试'})
  }


};
</script>
<style lang="scss" scoped>
.template-card-list-box {
  display: flex;
  flex-wrap: wrap;
  padding: 60px 0 0 0;

  .card-box-item {
    &:not(:nth-child(4n)) {
      margin-right: 33px;
    }
  }
}
</style>
